<template>
    <div>
      <el-row>
        <el-col :span="5">
          <el-input
            placeholder="请输预约姓名"
            v-model="likename"
            clearable>
          </el-input>
        </el-col>
      </el-row>
      <template>
        <el-table
          :data="findUsers(likename).slice((pageNun-1)*pageSize,pageNun*pageSize)"
          border
          style="width: 100%">
          <el-table-column
            prop="memberId"
            label="编号" width="60px">
          </el-table-column>
          <el-table-column
            prop="tMember.name"
            label="预约姓名" width="100px">
          </el-table-column>
          <el-table-column
            prop="tMember.idcard"
            label="预约人身份证号" width="auto">
          </el-table-column>
          <el-table-column
            label="预约性别" width="60px">
            <template slot-scope="scope">
              <el-steps v-if="scope.row.tMember.sex==1">男</el-steps>
              <el-steps v-if="scope.row.tMember.sex==2">女</el-steps>
            </template>
          </el-table-column>
          <el-table-column
            prop="tMember.filenumber"
            label="预约档案号" width="120px">
          </el-table-column>
          <el-table-column
            prop="tMember.phonenumber"
            label="预约手机号" width="120px">
          </el-table-column>
          <el-table-column prop="" label="预约人出生日期" header-align="center" align="center" width="100px">
            <template slot-scope="scope">
              {{scope.row.tMember.birthday | dateFormat}}
            </template>
          </el-table-column>
          <el-table-column prop="" label="预约人时间" header-align="center" align="center" width="100px">
            <template slot-scope="scope">
              {{scope.row.orderdate | dateFormat}}
            </template>
          </el-table-column>
          <el-table-column
            label="预约状态" prop="orderstatus" width="auto">
          </el-table-column>
          <el-table-column
            label="操作" width="auto">
            <template slot-scope="scope" >
              <el-button type="primary"   @click="dd(scope.row)">确认预约</el-button>
              <el-button type="danger"  @click="qx(scope.row)">取消预约</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          :current-page.sync="pageNun"
          :page-sizes="[2,4,6]"
          :page-size='pageSize'
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </template>
      <el-dialog width="500px"  class="dialog dialogAdd" custom-class="custom-dialog"
                 :visible.sync="dm" :close-on-click-modal="false">
        <h3>选择预约时间</h3>
        <el-date-picker
          :picker-options="pickerOptions"
          v-model="sj"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
        <el-button @click="qd()" type="primary">确认</el-button>
        <el-button @click="dm=false" type="danger">取消</el-button>
      </el-dialog>
    </div>
</template>

<script>
  import  {tOrderid,tOrderupdate} from '@/api/lgx/make'
    export default {
      data() {
        return {
          dm: false,
          cx: "",
          xx: null,
          sj:"",
          likename: "",
          pageSize: 4,
          pageNun: 1,
          total: 5,
          routerList: [],
          List: [],
          froms:{
            id:"",
            memberId:"",
            orderdate:"",
            ordertype:"",
            orderstatus:"",
            setmealId:"",
            createtime:"",
            updatetime:""
          },
          pickerOptions: {
            disabledDate(time) {
              return time.getTime() < Date.now()
            }
          },
        }
      },
      methods: {
        handleSizeChange(val) {
          this.pageSize = val
        }, findUsers(likename) {
          //包含includes的意思
          return this.routerList.filter((item, i) => {
            if (item.tMember.name.includes(likename)) {
              return item;
            }
          });
        },
        qx(row){
          if(row.orderstatus=="未到诊"){
            this.$message.error('未到诊不可取消预约');
          }else {
            this.froms.id=row.id;
            this.froms.memberId=row.memberId
            this.froms.ordertype=row.ordertype
            this.froms.orderdate=row.orderdate
            this.froms.setmealId=row.setmealId
            this.froms.createtime=row.createtime
            this.froms.updatetime=row.updatetime
            this.froms.orderstatus="取消预约"
            tOrderupdate(this.froms).then(response=>{
              if(response.data==1){
                this.$message.error('已取消预约');
                this.sx()
              }
            })
          }
        },
        dd(row){
          this.froms.id=row.id;
          this.froms.memberId=row.memberId
          this.froms.ordertype=row.ordertype
          this.froms.orderdate=row.orderdate
          this.froms.setmealId=row.setmealId
          this.froms.createtime=row.createtime
          this.froms.updatetime=row.updatetime
          this.froms.orderstatus=row.orderstatus
          this.dm=true;
        },
        qd(){
          this.dm=false
          this.froms.orderdate=this.sj
          tOrderupdate(this.froms).then(response=>{
            if(response.data==1){
              this.$message({
                message: '预约成功!',
                type: 'success'
              });
              this.sx()
            }
            if(response.data==0){
              this.$message.error('已有预约时间');
              this.sx()
            }
          })
        },
        sx(){
          tOrderid().then(response=>{
            console.log(response.data)
            this.routerList=response.data;
            this.total=response.data.length
          })
        }
      },created() {
        //显示所有
        tOrderid().then(response=>{
          console.log(response.data)
          this.routerList=response.data;
          this.total=response.data.length
        })
      },filters:{
        dateFormat:function(data){
          var dt=new Date(data)
          var n=dt.getFullYear();
          var y=(dt.getMonth()+1).toString().padStart(2,"0");//补零操作
          var r=(dt.getDate()).toString().padStart(2,"0");
          dt.getHours();
          dt.getMinutes();
          dt.getSeconds();
          return n+"-"+y+"-"+r;
        }
      }
    }
</script>

<style scoped>

</style>
